<template>
  <view class="container">
    <view class="demo-section">
      <text class="section-title">自定义对话框示例</text>
      
      <button class="demo-button" @tap="showBasicModal">
        基础对话框
      </button>
      
      <button class="demo-button" @tap="showCustomModal">
        自定义内容对话框
      </button>
      
      <button class="demo-button" @tap="showConfirmOnly">
        只有确认按钮
      </button>
      
      <button class="demo-button" @tap="showCustomButtons">
        自定义按钮组
      </button>
    </view>

    <!-- 基础对话框 -->
    <CustomModal
      v-model:visible="basicVisible"
      title="提示"
      message="确定要退出登录吗？"
      @confirm="handleLogout"
      @cancel="basicVisible = false"
    />

    <!-- 自定义内容对话框 -->
    <CustomModal
      v-model:visible="customVisible"
      title="个人信息"
    >
      <view class="custom-content">
        <text class="content-text">用户名：张三</text>
        <text class="content-text">邮箱：zhangsan@example.com</text>
        <text class="content-text">注册时间：2024-01-01</text>
      </view>
    </CustomModal>

    <!-- 只有确认按钮 -->
    <CustomModal
      v-model:visible="confirmOnlyVisible"
      title="操作成功"
      message="您的操作已成功完成！"
      :show-cancel="false"
      confirm-text="知道了"
      @confirm="confirmOnlyVisible = false"
    />

    <!-- 自定义按钮组 -->
    <CustomModal
      v-model:visible="customButtonsVisible"
      title="选择操作"
    >
      <view class="custom-content">
        <text class="content-text">您想对这个项目做什么？</text>
      </view>
      
      <template #buttons>
        <view class="custom-buttons">
          <button class="custom-btn edit-btn" @tap="handleEdit">
            编辑
          </button>
          <button class="custom-btn delete-btn" @tap="handleDelete">
            删除
          </button>
          <button class="custom-btn cancel-btn" @tap="customButtonsVisible = false">
            取消
          </button>
        </view>
      </template>
    </CustomModal>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import CustomModal from '@/components/CustomModal.vue'

// 对话框显示状态
const basicVisible = ref(false)
const customVisible = ref(false)
const confirmOnlyVisible = ref(false)
const customButtonsVisible = ref(false)

// 显示对话框方法
const showBasicModal = () => {
  basicVisible.value = true
}

const showCustomModal = () => {
  customVisible.value = true
}

const showConfirmOnly = () => {
  confirmOnlyVisible.value = true
}

const showCustomButtons = () => {
  customButtonsVisible.value = true
}

// 事件处理方法
const handleLogout = () => {
  uni.showLoading({ title: '退出中...' })
  setTimeout(() => {
    uni.hideLoading()
    basicVisible.value = false
    uni.showToast({ title: '已退出登录', icon: 'success' })
  }, 1500)
}

const handleEdit = () => {
  customButtonsVisible.value = false
  uni.showToast({ title: '进入编辑模式', icon: 'none' })
}

const handleDelete = () => {
  customButtonsVisible.value = false
  uni.showLoading({ title: '删除中...' })
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '删除成功', icon: 'success' })
  }, 1000)
}
</script>

<style lang="scss" scoped>
.container {
  padding: 40rpx;
  min-height: 100vh;
  background: #f5f5f5;
}

.demo-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
}

.section-title {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 40rpx;
  text-align: center;
}

.demo-button {
  width: 100%;
  margin-bottom: 30rpx;
  padding: 30rpx;
  font-size: 32rpx;
  background: #007aff;
  color: #fff;
  border: none;
  border-radius: 16rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  &:active {
    opacity: 0.8;
  }
}

.custom-content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  text-align: left;
}

.content-text {
  font-size: 32rpx;
  color: #666;
  line-height: 1.6;
}

.custom-buttons {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 40rpx;
}

.custom-btn {
  padding: 30rpx 0;
  font-size: 34rpx;
  border: none;
  border-radius: 16rpx;
  
  &:active {
    opacity: 0.8;
  }
  
  &:after {
    border: none;
  }
}

.edit-btn {
  background: #007aff;
  color: #fff;
}

.delete-btn {
  background: #ff3b30;
  color: #fff;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}
</style>